import React, { useState } from 'react'

export default function AddDiscount() {
    const [title,setTitle] = useState("新人券")
    const [type,setType] = useState("3")
    const [state,setState] = useState("")
    const [edu,setEdu] = useState(["bk"])
    const titleChangeEvent = (event)=>{
        const value = event.target.value
        console.log(value);
        setTitle(value)
    }
    const typeChangeEvent = (event)=>{
        const value = event.target.value
        setType(value)
    }
    const addProduct = ()=>{
        setTitle("通用券")
    }

    const stateChangeEvent = (event)=>{
        const value = event.target.value
        console.log(value);
        setState(value)
    }

    const eduChangeEvent = (event)=>{
        const array = [...edu]
        const element = event.target
        console.log(element.checked);
        const value = element.value;
        if(element.checked){
            array.push(value)
        }else{
            const index = array.findIndex(item=>item == value)
            array.splice(index,1)
        }
        setEdu(array)
        
    }

    return (
        <div style={{boxShadow:"10px 10px 10px rgba(0,0,0,.5)",width:"700px",padding:"20px"}}>
            <div className='item'>
                <label htmlFor="">优惠券名字：</label>
                <input value={title} onChange={titleChangeEvent} name='title' type="text" placeholder="请输入名字" />
            </div>
            <div className='item'>
                <label htmlFor="">优惠券类型：</label>
                <select name="receiveType" value={type} onChange={typeChangeEvent}>
                    <option value="1">通用券</option>
                    <option value="2">商品券</option>
                    <option value="3">新人券</option>
                </select>
            </div>
            <div className='item'>
                <span>状态：</span>
                <label htmlFor="" >开启</label>
                <input name='state' checked={state} onChange={stateChangeEvent} value="on" type="radio"/>
                <label htmlFor="" >关闭</label>
                <input name='state' checked={state} onChange={stateChangeEvent} value="off" type="radio"/>
            </div>
            <div className='item'>
                <span>学历：</span>
                <label htmlFor="">本科</label>
                <input type="checkbox" value="bk" checked={edu.includes("bk")} onChange={eduChangeEvent}  />
                <label htmlFor="">专科</label>
                <input type="checkbox" value="zk" checked={edu.includes("zk")} onChange={eduChangeEvent}  />
            </div>
            <div>
                <button onClick={addProduct}>添加</button>
            </div>
        </div>
    )
}
